<template>
	<div class="feedback-system max-w-4xl mx-auto px-4 py-8">
		<!-- 标题区域 -->
		<div class="text-center mb-10">
			<h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold text-dark mb-3 text-shadow">
				你的反馈对我们很重要
			</h2>
			<p class="text-gray-600 max-w-2xl mx-auto">
				有什么想法、建议或问题？请在此留言，我们会尽快回复您。
			</p>
		</div>

		<!-- 留言表单 -->
		<div class="bg-white rounded-xl shadow-lg p-6 mb-10 transform transition-all duration-300 hover:shadow-xl">
			<form @submit.prevent="addMessage" class="space-y-4">
				<div>
					<label for="name" class="block text-sm font-medium text-gray-700 mb-1">您的昵称</label>
					<input type="text" id="name" v-model="newMessage.name"
						class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200"
						placeholder="请输入您的昵称" required>
				</div>

				<div>
					<label for="message" class="block text-sm font-medium text-gray-700 mb-1">留言内容</label>
					<textarea id="message" v-model="newMessage.content" rows="4"
						class="w-full px-4 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-primary/50 focus:border-primary transition-all duration-200 resize-none"
						placeholder="请输入您的留言内容..." required></textarea>
				</div>

				<div class="flex justify-end">
					<button type="submit"
						class="bg-primary hover:bg-primary/90 text-white px-6 py-2 rounded-lg shadow-md hover:shadow-lg transition-all duration-300 flex items-center">
						<i class="fa fa-paper-plane mr-2"></i> 提交留言
					</button>
				</div>
			</form>
		</div>

		<!-- 留言列表 -->
		<div class="mb-10">
			<div class="flex justify-between items-center mb-6">
				<h3 class="text-xl font-bold text-dark">最新留言</h3>
				<div class="text-sm text-gray-500">
					共有 <span class="text-primary font-semibold">{{ messages.length }}</span> 条留言
				</div>
			</div>

			<div class="space-y-4" id="message-list">
				<!-- 留言卡片 -->
				<transition-group name="message" tag="div" class="space-y-4">
					<div v-for="(message, index) in messages" :key="message.id"
						class="bg-white rounded-xl shadow-md p-6 card-hover">
						<div class="flex justify-between items-start mb-3">
							<div class="flex items-center">
								<div
									class="w-10 h-10 rounded-full bg-primary/10 flex items-center justify-center text-primary mr-3">
									<span class="font-bold">{{ message.name.charAt(0).toUpperCase() }}</span>
								</div>
								<div>
									<h4 class="font-semibold text-dark">{{ message.name }}</h4>
									<p class="text-xs text-gray-500">
										<i class="fa fa-clock-o mr-1"></i>
										{{ formatDate(message.timestamp) }}
									</p>
								</div>
							</div>
							<button @click="deleteMessage(index)"
								class="text-gray-400 hover:text-red-500 transition-colors duration-200" title="删除留言">
								<i class="fa fa-trash-o text-lg"></i>
							</button>
						</div>
						<p class="text-gray-700 leading-relaxed">{{ message.content }}</p>
					</div>
				</transition-group>

				<!-- 无留言状态 -->
				<div v-if="messages.length === 0" class="text-center py-12">
					<div class="text-gray-400 text-5xl mb-4">
						<i class="fa fa-comment-o"></i>
					</div>
					<p class="text-gray-500">暂无留言，快来留下你的想法吧！</p>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: 'FeedbackSystem',
		data() {
			return {
				messages: [{
						id: 1,
						name: '张三',
						content: '这个系统非常好用，界面简洁明了！',
						timestamp: new Date().getTime() - 3600000
					},
					{
						id: 2,
						name: '李四',
						content: '希望能够增加分类功能，这样查找留言会更方便。',
						timestamp: new Date().getTime() - 7200000
					},
					{
						id: 3,
						name: '王五',
						content: '建议添加回复功能，这样可以更好地沟通。',
						timestamp: new Date().getTime() - 10800000
					}
				],
				newMessage: {
					name: '',
					content: ''
				}
			}
		},
		methods: {
			// 添加留言
			addMessage() {
				if (!this.newMessage.name.trim() || !this.newMessage.content.trim()) {
					return;
				}

				const newMsg = {
					id: Date.now(),
					name: this.newMessage.name,
					content: this.newMessage.content,
					timestamp: new Date().getTime()
				};

				this.messages.unshift(newMsg);

				// 清空表单
				this.newMessage.name = '';
				this.newMessage.content = '';

				// 滚动到最新留言
				setTimeout(() => {
					const messageList = document.getElementById('message-list');
					if (messageList) {
						messageList.scrollIntoView({
							behavior: 'smooth',
							block: 'start'
						});
					}
				}, 100);
			},

			// 删除留言
			deleteMessage(index) {
				if (confirm('确定要删除这条留言吗？')) {
					this.messages.splice(index, 1);
				}
			},

			// 格式化日期
			formatDate(timestamp) {
				const date = new Date(timestamp);
				return date.toLocaleString('zh-CN', {
					year: 'numeric',
					month: '2-digit',
					day: '2-digit',
					hour: '2-digit',
					minute: '2-digit'
				});
			}
		}
	}
</script>

<style less>
	.feedback-system {
		font-family: 'Inter', system-ui, sans-serif;
	}

	.card-hover {
		transition: all 0.3s ease;
	}

	.card-hover:hover {
		transform: translateY(-5px);
		box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
	}

	.message-enter-active,
	.message-leave-active {
		transition: all 0.5s ease;
	}

	.message-enter-from,
	.message-leave-to {
		opacity: 0;
		transform: translateY(30px);
	}

	.message-leave-active {
		position: absolute;
		width: 100%;
	}
</style>